<template>
    <view class="credit-page">
        <!-- 头部 -->
        <view class="credit-header">
            <view class="credit-header-left">
                <view class="title">当前诚信值</view>
                <view class="score">{{ creditScore }}</view>
            </view>
            <view class="credit" @click="
                navigateTo('/pages/personalCenter/creditValue/creditValueRules')
                ">
                <text>诚信值规则</text>
                <image class="right-details-icon" src="/static/personalCenter/details-right.png" mode="aspectFill">
                </image>
            </view>
        </view>

        <!-- 记录列表 -->
        <view class="record-list">
            <!-- <view class="list-title">诚信记录</view> -->
            <view class="record-item" v-for="(item, index) in records" :key="index">
                <view class="item-left">
                    <text class="record-type">{{ item.type }}</text>
                    <text class="record-time">{{ item.time }}</text>
                </view>
                <view class="item-right" :class="{ add: item.value > 0, reduce: item.value < 0 }">
                    <text class="record-value" :class="{ add: item.value > 0, reduce: item.value < 0 }">{{ item.value >
                        0 ? "+" : "" }}{{ item.value }}</text>
                    <text class="record-remainder">剩余诚信值：{{ item.remainderValue }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            creditScore: 0,
            records: [],
        };
    },
    
    onLoad() {
        this.fetchHonestyLog(); 
    },
    methods: {
        async fetchHonestyLog() {
			try {
				const data = await this.$http.get('/h5/user/honestyLog')
				console.log('诚信值：', data.data); // data.data.list
                let total = 0;
                this.records = data.data.list && data.data.list.map(item=>{
                    total += parseFloat(item.after);
                    return {
                        type: item.remark, 
                        value: item.change, 
                        remainderValue: item.after, 
                        time: item.created_at
                    }
                });
                
                this.creditScore = total.toFixed(2)// .toFixed(1);
			} catch (error) {}
		},
        // 导航到指定页面
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
    },
};
</script>

<style scoped>
.credit-page {
    padding: 20rpx 26rpx;
}

.credit-header {
    width: 100%;
    height: 220rpx;
    background-image: url("~@/static/personalCenter/credit-card.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.credit-header-left {
    padding-left: 122rpx;
}

.credit-header .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
    padding-bottom: 30rpx;
}

.credit-header .score {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 48rpx;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
}

.credit-header .progress {
    margin: 0 40rpx 20rpx;
}

.credit-header.tips {
    font-size: 24rpx;
    color: #999;
}

.credit-header .credit {
    width: 192rpx;
    height: 52rpx;
    background: rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 60rpx 0 0 60rpx;
}

.right-details-icon {
    width: 26rpx;
    height: 26rpx;
}

.record-list {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 40rpx;
}

.list-title {
    font-size: 28rpx;
    color: #333;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
}

.record-item:last-child {
    border-bottom: none;
}

.item-left {
    display: flex;
    flex-direction: column;
}

.record-type {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 50rpx;
}

.record-time {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #AFB5BE;
    line-height: 50rpx;
}

.item-right {}

.record-value {
    display: block;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 32rpx;
    color: #FF3F39;
    line-height: 50rpx;
    text-align: right;
}


.add {
    color: #00CFAB;
}

.reduce {
    color: #FF3F39;
}

.record-remainder {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 50rpx;
    text-align: right;
}
</style>
